import { clone, delay } from "@pureadmin/utils";
import { ref, onMounted, reactive, watchEffect } from "vue";
import type {
  PaginationProps,
  LoadingConfig,
  Align,
  AdaptiveConfig
} from "@pureadmin/table";
// import dayjs from "dayjs";
// import {
//   clientListTable,
//   clientListColumns
// } from "@/components/ReTable/tableContent/clientAdmin/clientListData";
// import {
//   blindBoxListTable,
//   blindBoxListColumns
// } from "@/components/ReTable/tableContent/blindBoxAdmin/blindBoxListData";
// import {
//   shopTypeListTable,
//   shopTypeListColumns
// } from "@/components/ReTable/tableContent/shopAdmin/shopTypeListData";
// import {
//   shopListTable,
//   shopListColumns
// } from "@/components/ReTable/tableContent/shopAdmin/shopListData";
// import {
//   agreementListTable,
//   agreementListColumns
// } from "@/components/ReTable/tableContent/agreementAdmin/agreementListData";
// import {
//   buySchemeListTable,
//   buySchemeListColumns
// } from "@/components/ReTable/tableContent/blindBoxAdmin/buySchemeListData";
// import {
//   blindBoxGoodsListTable,
//   blindBoxGoodsListColumns
// } from "@/components/ReTable/tableContent/blindBoxAdmin/blindBoxGoodsListData";
//
// import {
//   lotteryRecordListTable,
//   lotteryRecordListColumns
// } from "@/components/ReTable/tableContent/blindBoxAdmin/lotteryRecordListData";
// import {
//   giveRecordListTable,
//   giveRecordListColumns
// } from "@/components/ReTable/tableContent/blindBoxAdmin/giveRecordListData";
// import {
//   capitalRecordListTable,
//   capitalRecordListColumns
// } from "@/components/ReTable/tableContent/clientAdmin/capitalRecordListData";
// import {
//   withdrawRecordListTable,
//   withdrawRecordListColumns
// } from "@/components/ReTable/tableContent/clientAdmin/withdrawRecordListData";
//
// // const date = dayjs(new Date()).format("YYYY-MM-DD");
// const tableConfigMap = {
//   clientList: { columns: clientListColumns, data: clientListTable },
//   blindBoxList: { columns: blindBoxListColumns, data: blindBoxListTable },
//   shopTypeList: { columns: shopTypeListColumns, data: shopTypeListTable },
//   shopList: { columns: shopListColumns, data: shopListTable },
//   agreementList: { columns: agreementListColumns, data: agreementListTable },
//   buySchemeList: { columns: buySchemeListColumns, data: buySchemeListTable },
//   blindBoxGoodsList: {
//     columns: blindBoxGoodsListColumns,
//     data: blindBoxGoodsListTable
//   },
//   lotteryRecordList: {
//     columns: lotteryRecordListColumns,
//     data: lotteryRecordListTable
//   },
//   giveRecordList: { columns: giveRecordListColumns, data: giveRecordListTable },
//   capitalRecordList: {
//     columns: capitalRecordListColumns,
//     data: capitalRecordListTable
//   },
//   withdrawRecordList: {
//     columns: withdrawRecordListColumns,
//     data: withdrawRecordListTable
//   }
// };

function loadTableConfig(tableName) {
  switch (tableName) {
    case "clientList": // 客户列表
      return import(
        `@/components/ReTable/tableContent/clientAdmin/clientListData`
      ).then(module => ({
        columns: module.clientListColumns,
        data: module.clientListTable
      }));
    case "blindBoxList": // 盲盒列表
      return import(
        `@/components/ReTable/tableContent/blindBoxAdmin/blindBoxListData`
      ).then(module => ({
        columns: module.blindBoxListColumns,
        data: module.blindBoxListTable
      }));
    case "shopTypeList": // 商品分类列表
      return import(
        `@/components/ReTable/tableContent/shopAdmin/shopTypeListData`
      ).then(module => ({
        columns: module.shopTypeListColumns,
        data: module.shopTypeListTable
      }));
    case "shopList": // 商品列表
      return import(
        `@/components/ReTable/tableContent/shopAdmin/shopListData`
      ).then(module => ({
        columns: module.shopListColumns,
        data: module.shopListTable
      }));
    case "agreementList": // 协议列表
      return import(
        `@/components/ReTable/tableContent/agreementAdmin/agreementListData`
      ).then(module => ({
        columns: module.agreementListColumns,
        data: module.agreementListTable
      }));
    case "buySchemeList": // 购买方案列表
      return import(
        `@/components/ReTable/tableContent/blindBoxAdmin/buySchemeListData`
      ).then(module => ({
        columns: module.buySchemeListColumns,
        data: module.buySchemeListTable
      }));
    case "blindBoxGoodsList": // 盲盒商品列表
      return import(
        `@/components/ReTable/tableContent/blindBoxAdmin/blindBoxGoodsListData`
      ).then(module => ({
        columns: module.blindBoxGoodsListColumns,
        data: module.blindBoxGoodsListTable
      }));
    case "lotteryRecordList": // 抽奖记录列表
      return import(
        `@/components/ReTable/tableContent/blindBoxAdmin/lotteryRecordListData`
      ).then(module => ({
        columns: module.lotteryRecordListColumns,
        data: module.lotteryRecordListTable
      }));
    case "giveRecordList": // 赠送记录列表
      return import(
        `@/components/ReTable/tableContent/blindBoxAdmin/giveRecordListData`
      ).then(module => ({
        columns: module.giveRecordListColumns,
        data: module.giveRecordListTable
      }));
    case "capitalRecordList": // 资金记录列表
      return import(
        `@/components/ReTable/tableContent/clientAdmin/capitalRecordListData`
      ).then(module => ({
        columns: module.capitalRecordListColumns,
        data: module.capitalRecordListTable
      }));
    case "withdrawRecordList": // 提现记录列表
      return import(
        `@/components/ReTable/tableContent/clientAdmin/withdrawRecordListData`
      ).then(module => ({
        columns: module.withdrawRecordListColumns,
        data: module.withdrawRecordListTable
      }));
    case "userCouponList": // 用户优惠券列表
      return import(
        `@/components/ReTable/tableContent/clientAdmin/userCouponListData`
      ).then(module => ({
        columns: module.userCouponListColumns,
        data: module.userCouponListTable
      }));
    case "userAddressList": // 用户优惠券列表
      return import(
        `@/components/ReTable/tableContent/clientAdmin/userAddressListData`
      ).then(module => ({
        columns: module.userAddressListColumns,
        data: module.userAddressListTable
      }));
    default:
      throw new Error(`Table config for ${tableName} not found.`);
  }
}

const tableData = [];
export function useColumns() {
  const dataList = ref([]);
  const loading = ref(true);
  const select = ref("no");
  const hideVal = ref("nohide");
  const tableSize = ref("default");
  const paginationSmall = ref(false);
  const paginationAlign = ref("left");
  var columns = [];
  async function getTableType(type: string) {
    tableData.length = 0;
    const tableConfig = await loadTableConfig(type);
    if (tableConfig) {
      columns = tableConfig.columns;
      tableData.push(tableConfig.data);
    }
    return columns;
  }
  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    pageSizes: [10, 15, 20],
    total: 0,
    align: "left",
    background: true,
    small: true
  });

  /** 加载动画配置 */
  const loadingConfig = reactive<LoadingConfig>({
    text: "正在加载第一页...",
    viewBox: "-10, -10, 50, 50",
    spinner: `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
    // svg: "",
    // background: rgba()
  });
  /** 撑满内容区自适应高度相关配置 */
  const adaptiveConfig: AdaptiveConfig = {
    /** 表格距离页面底部的偏移量，默认值为 `96` */
    offsetBottom: 110
    /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
    // fixHeader: true
    /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
    // timeout: 60
    /** 表头的 `z-index`，默认值为 `100` */
    // zIndex: 100
  };
  function onChange(val) {
    pagination.small = val;
  }

  function onSizeChange(val) {
    console.log("onSizeChange", val);
  }

  function onCurrentChange(val) {
    loadingConfig.text = `正在加载第${val}页...`;
    loading.value = true;
    delay(600).then(() => {
      loading.value = false;
    });
  }

  watchEffect(() => {
    pagination.align = paginationAlign.value as Align;
  });

  onMounted(() => {
    delay(600).then(() => {
      const newList = [];
      Array.from({ length: 10 }).forEach(() => {
        newList.push(clone(tableData, true));
      });
      newList.flat(Infinity).forEach((item, index) => {
        dataList.value.push({ id: index, ...item });
      });
      pagination.total = dataList.value.length;
      loading.value = false;
    });
  });

  return {
    loading,
    columns,
    dataList,
    select,
    hideVal,
    tableSize,
    pagination,
    loadingConfig,
    paginationAlign,
    paginationSmall,
    adaptiveConfig,
    getTableType,
    onChange,
    onSizeChange,
    onCurrentChange
  };
}
